<template>
  <el-dialog
    v-model="showDialog"
    :title="title"
    left
    :append-to-body="true"
    class="drag-dialog small-padding-dialog"
    width="60%"
    :before-close="closeDialog"
    :close-on-click-modal="false"
    destroy-on-close
    align-center
  >
    <el-form :model="form" label-width="120px" ref="formRef">
      <el-row justify="start">
        <el-col :span="24">
          <el-form-item class="custom-form-item">
            <span>tips:  新增数据表后会默认创建id、file_id字段，都为bigint类型，其中id为自增主键</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="元数据名称"
            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写元数据名称' }"
            prop="metaName"
          >
            <el-input v-model="form.metaName" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="数据库表名"
            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写数据库表名' }"
            prop="metaCode"
          >
            <el-input :disabled="updated" v-model="form.metaCode" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="空间数据类型"
            :rules="{ required: true, trigger: ['blur', 'change'], message: '请选择空间数据类型' }"
            prop="dataType"
          >
            <el-select v-model="form.dataType" placeholder="请选择空间数据类型">
              <el-option
                v-for="item in dataTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="24">
          <el-form-item label="资源外壳" prop="sort">
            <el-switch v-model="form.shelled" />
          </el-form-item>
        </el-col> -->
        <el-col :span="24">
          <el-form-item label="排序" prop="sort">
            <el-input v-model="form.sort" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input type="textarea" v-model="form.remark" />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="24">
          <el-form-item label="细览页路由" prop="remark">
            <el-input v-model="form.detailRoute" />
          </el-form-item>
        </el-col> -->
        <!-- <el-col :span="24">
          <el-form-item label="停用" prop="remark">
            <el-switch v-model="form.deleted" />
          </el-form-item>
        </el-col> -->
        <el-col :span="24">
          <el-form-item label="是否停用" prop="status">
            <el-switch
              v-model="form.status"
              :active-value="1"
              :inactive-value="0"
            />
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="closeDialog">关闭</el-button>
        <el-button type="primary" @click="saveForm">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { FormInstance } from 'element-plus'
import * as MetaApi from '@/api/meta'
import { log } from 'console';

const title = ref('修改元数据')
const showDialog = ref(false)
const updated = ref(false)

const formRef = ref<FormInstance>()

const form = ref({})

const openDialog = () => {
  showDialog.value = true
  updated.value = false
  title.value = '添加元数据'
}
const closeDialog = () => {
  showDialog.value = false
  form.value = {}
}
const updateDialog = async (id) => {
  showDialog.value = true
  updated.value = true
  title.value = '修改元数据'
  form.value = await MetaApi.selectOne(id)
}
const saveForm = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      if (!updated.value) {
        await MetaApi.easyCreateMeta(form.value)
      } else {
        await MetaApi.easyUpdateMeta(form.value)
      }
      showDialog.value = false
      getList()
    }
  })
}

const getList: any = inject('getList')

/* 空间数据类型下拉框 */
const dataTypeList = ref([])
const getDataType = async () => {
  dataTypeList.value = await MetaApi.selectDataType()
}

defineExpose({
  openDialog,
  updateDialog
})

/** 初始化 **/
onMounted(() => {
  getDataType()
})
</script>
<style>
.file-count {
  width: 120px;
}

.el-row {
  margin-bottom: 20px;
}
</style>
